<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
事件委托<br>
<ul id="number">
    <li>1
        <button>删除</button>
    </li>
    <li>2
        <button>删除</button>
    </li>
    <li>3
        <button>删除</button>
    </li>
    <li>4
        <button>删除</button>
    </li>
    <li>5
        <button>删除</button>
    </li>
    <li>6
        <button>删除</button>
    </li>
    <li>7
        <button>删除</button>
    </li>
    <li>8
        <button>删除</button>
    </li>
    <li>9
        <button>删除</button>
    </li>
</ul>
<script>
    function test1(event) {
        var li = document.getElementsByTagName('li')
        if (event.target.nodeName === 'BUTTON') {
            var button = document.getElementsByTagName('button')
            for (var j = 0; j < button.length; j++) {
                if (event.target === button[j]) {
                    var buttonParent = event.target.parentElement;
                    var grandParent = buttonParent.parentElement;
                    grandParent.removeChild(buttonParent)
                }
            }
        } else if (event.target.nodeName === 'LI') {
            for (var i = 0; i < li.length; i++) {
                if (event.target === li[i]) {
                    var parent = event.target.parentElement;
                    parent.removeChild(li[i])
                }
            }
        }
    }

    // function test() {
    //
    // }
    var ul = document.getElementById('number')
    // console.log(ul)
    // ul.onclick
    //回调函数只需要传入函数表达式  不是立即执行的
    //会把event事件默认传入函数
    ul.addEventListener('click', test1)
    console.error(this===this.window)
    console.log(this.window.location)
    console.log(this.window.history)
</script>
</body>
</html>
